﻿ProductTemplate = {
    GetRootPath: function () {
        //--------------------------------------------------------        
        var rootPath = '';
        var loc = window.location.host;
        if (loc == 'tuantrang' || loc == 'localhost') {
            rootPath = 'http://thongthuongdieselengine.com/';
        }
        //--------------------------------------------------------
        return rootPath;
    },
    Load: function (data) {
        if (data) {
            var _this = this;
            console.log('::ProductTemplate::02', data);
            _this.ShowInfo(data[1]);
            _this.ShowImage(data[2], data[1]);
            _this.ShowVideo(data[3]);
            _this.ShowArticle(data[4]);
        }
    },
    ShowInfo: function (data) {
        if (data) {
            var it = data[0];
            if (it) {
                $('.product-name').html(it.Name);
                $('.product-summary').html(it.Summary);

                $('.box-collateral-content .detail').html(it.Detail);
            }
        }
    },
    ShowImage: function (data, info) {
        var $imgFull = $('.img-full'),
            $imgThumb = $('#img-list'),
            arrFull = [], arrThumb = [],
            tempFull = '<a rel="gallery" href="{0}"><img src="{0}" id="{1}" alt="" /></a>',
            temThumb = '<a href="javascript:void(0)"><img src="{0}" id="{1}" alt="" /></a>',
            rootPath = this.GetRootPath();
        if (!data.length) {
            data = info;
        }
        $.each(data, function (idx, it) {
            var img = rootPath + it.Image;
            if (it.Image == '') img = '../../Images/no_image.jpg';
            arrFull.push($.string.Format(tempFull, img, it.ID));
            arrThumb.push($.string.Format(tempFull, img, it.ID));
        });
        if (arrFull.length) {
            $imgFull.html(arrFull.join(''));

            $imgFull.find('img').each(function () {
                var $img = $(this);
                if ($img.width() > $img.height()) {
                    $img.css({ height: "300px", width: "auto" });
                }
                else {
                    $img.css({ width: "300px", height: "auto" });
                }
            });
        }
        if (arrThumb.length) {
            $imgThumb.html(arrThumb.join(''));
            $imgThumb.find('img').each(function () {
                var $img = $(this);
                if ($img.width() > $img.height()) {
                    $img.css({ height: "30px", width: "auto" });
                }
                else {
                    $img.css({ width: "30px", height: "auto" });
                }
            });

            $imgThumb.carouFredSel({
                height: 35,
                items: 3,
                circular: true,
                infinite: true,
                auto: false,
                align: 'left',
                prev: '#img-prev',
                next: '#img-next',
                scroll: {
                    items: 1,
                    duration: 1000,
                    pauseOnHover: true
                }
            });
            $imgThumb.find('img').click(function () {
                var $img = $(this);
                var id = $img.attr("id");
                $imgFull.find('a').addClass("hidden");
                $imgFull.find('img[id="' + id + '"]').parent().removeClass("hidden");
                $imgThumb.removeClass("img-list-selected");
                $img.addClass("img-list-selected");
            });

            $("a[rel=gallery]").fancybox({
                cyclic: true,
                opacity: true,
                autoScale: false
            });
            $("a.img-zoom").click(function () {
                $imgFull.find('a:visible').trigger("click");
            });
        }
    },
    ShowVideo: function (data) {
        if (data) {
            var arr = [],
                temp = '<div v="{1}"></div>';
            $.each(data, function (idx, it) {
                var linkURL = it.LinkURL;
                if (linkURL) {
                    var vid = $.GetURL("v", "", linkURL);
                    arr.push($.string.Format(temp, it.ID, vid));
                }
            });
            $(".box-collateral-content .video").html(arr.join(''));
            $(".box-collateral-content .video div").each(function () {
                var $v = $(this);
                $v.tubeplayer({
                    width: 666,
                    height: 374,
                    allowFullScreen: "true",
                    initialVideo: $v.attr('v'),
                    autoHide: true,
                    loadSWFObject: true,
                    iframed: true
                });
            });
        }
    },
    ShowArticle: function (data) {
        if (data) {
            var arr = [],
                temp = '<h3>{0}</h3><div>{1}</div>';
            $.each(data, function (idx, it) {
                arr.push($.string.Format(temp, it.Title, it.Body));
            });
            if (arr.length) {
                var html = '<div id="accArticle">' + arr.join('') + '</div>';
                $('.box-collateral-content .article').html(html);
                $("#accArticle").accordion();
            }
        }
    }
};